@extends('admin.common.main')
@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 文章管理
        <span class="c-gray en">&gt;</span> 文章列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    {{-- 添加文章按钮 --}}
    {!! auth()->user()->addBtn('admin.article.create') !!}

    <form method="get" class="text-c" onsubmit="return dopost()"> 日期范围：
        <input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})" id="datemin"
               class="input-text Wdate" style="width:120px;">
        -
        <input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemax"
               class="input-text Wdate" style="width:120px;">
        <input type="text" class="input-text" style="width:250px" placeholder="输入会员名称、电话、邮箱" id="title">
        <button type="submit" class="btn btn-success"><i class="icon-search"></i> 搜索文章
        </button>
    </form>

    <table class="table table-border table-bordered table-hover table-bg table-sort">
        <thead>
        <tr class="text-c">
            <th width="30">ID</th>
            <th width="100">文章标题</th>
            <th width="100">文章简介</th>
            <th width="100">加入时间</th>
            <th width="100">封面</th>
            <th width="100">操作</th>
        </tr>
        </thead>
    </table>

@endsection

@section('js')
    <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>

    <script>
        // Datatable的列表显示
        var datatable = $('.table-hover').DataTable({
            // 下拉数量
            lengthMenu: [5, 10, 20, 30, 50, 100],
            stateSave: true,
            // 关闭搜索
            searching: false,
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [5]}// 制定列不参与排序
            ],

            // 开启服务器端分页
            serverSide: true,
            // ajax 发起请求
            ajax: {
                url: '{{ route('admin.article.index') }}',
                type: 'GET',
                // 参数 动态获取表单参数-----使用函数---
                data: function (ret) {
                    ret.datemin = $('#datemin').val();
                    ret.datemax = $('#datemax').val();
                    ret.title = $.trim($('#title').val());
                }
            },
            columns: [
                // 总的数量与表格的列的数量一致，不多也不少
                // 字段名称与sql查询出来的字段时要保持一致，就是服务器返回数据对应的字段名称
                // defaultContent 和 className 可选参数
                {
                    'data': 'id',
                    'className': 'text-c'
                },
                {
                    'data': 'title',
                    'className': 'text-c'
                },
                {
                    'data': 'desn',
                    'className': 'text-c'
                },
                {
                    'data': 'created_at',
                    'className': 'text-c'
                },
                {
                    'data': 'pic',
                    'className': 'text-c'
                },
                {
                    'data': 'action',
                    'className': 'text-c',
                    defaultContent: '鸡蛋好吃呀'
                },
            ],

            /*
            创建tr/td时的回调函数，可以继续修改、优化tr/td的显示，里边有遍历效果，会依次扫描生成的每个tr
            row:创建好的tr的dom对象 当前行
            data:数据源，代表服务器端返回的每条记录的实体信息   当前行的数据
            dataIndex:数据源的索引号码
            */
            createdRow: function (row, data, dataIndex) {
                // 获取当前行id
                var id = $(row).find('td:first-child').html();
                // 行的指定列
                var act = $(row).find('td:last-child');
                var td = $(row).find('td:nth-child(5)');
                // 显示的html内容
                var html = `
                <img src="${td.html()}" style="width: 180px;height: 120px">
                `;
                var html2 = `
                <a href="/admin/article/${id}/edit" class="label label-success radius">修改</a>
                <a href="/admin/article/${id}" onclick="return delArticle(event,this)" class="label label-warning radius">删除</a>
                `;
                td.html(html);
                act.html(html2);
            }
        });

        // 表单提交
        function dopost() {
            // Datatable重新加载
            datatable.ajax.reload();
            //取消表单默认行为
            return false;
        }

        // 删除一条记录
        function delArticle2(item) {
            let url = $(item).attr('href');
            // console.log(url)
            fetch(url, {
                method: 'delete',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                }
            }).then(ret => {
                return ret.json();
            }).then(({msg, code}) => {
                if (code === 201) {
                    $(item).closest('tr').remove();
                    layer.msg(msg, {icon: 1, time: 900});
                }
            })
            return false;
        }

        // 异步变同步删除一条记录
        async function delArticle(evt, item) {
            evt.preventDefault();
            let url = $(item).attr('href');
            let ret = await fetch(url, {
                method: 'delete',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                }
            });
            let {msg, code} = await ret.json();
            if (code === 201) {
                layer.msg(msg, {icon: 1, time: 900});
                $(item).closest('tr').remove();
            }
        }
    </script>



@endsection
